<template>
  <div class="successmodal-page">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container">
        <mds-button type="primary" @click="openModal">操作成功弹窗</mds-button>
        <mds-modal
            class="success-modal"
            :visibility="visibility"
            title="操作成功弹窗"
            @ok="handleOk"
            width="520px"
            @close="handleClose"
            :mask="mask"
            :showClose="true"
        >
            <div class="content">
                <mds-icon type="check-circle" class="icon"/>
                <p class="title">支付成功，标题居中对齐</p>
                <p class="info">描述内容，文案居中对齐，宽度根据文字内容自适应，超出472px后折行，此样式规则适用于Slidepanel、对话框中的结果反馈。</p>
            </div>
            <div slot="footer" style="text-align: center; font-size: 0px;">
                <Mds-button type="primary" @click='handleOk' style="margin-left: 8px;">
                保存
                </Mds-button>
                <Mds-button @click='handleOk' style="margin-left: 8px;">
                取消
                </Mds-button>
            </div>
        </mds-modal>
      </div>
    </container-box>
  </div>
</template>
<script>
import ContainerBox from '@/components/ContainerBox'
export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  data() {
    return {
      visibility: false,
      mask: true
    }
  },
  methods: {
    openModal() {
      this.visibility = true
    },
    handleOk() {
      this.visibility = false
    },
    handleClose() {
      this.visibility = false
    }
  }
}
</script>
<style>
    .success-modal .content{
        text-align: center;
        margin-bottom: 40px;
    }
    .success-modal .content .title {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 17px;
        color: #354052;
        font-weight: bold;
    }
    .success-modal .content .info {
        font-size: 14px;
        line-height: 22px;
        color: #7F8FA4;
    }
    .success-modal .content .icon {
        font-size: 64px;
        margin-bottom: 28px;
        color: #00AA00;
    }
</style>
